<template>
	<my-main title="销售员业绩明细"  isBack :table="table" @search="getTbody" @infoFun="infoFun">
		<template #tableTbody="{ tbody }">
			<my-list :options="tbody" >
				<template #item="{ row }">
					<view class="p-16 bg-color-white radius-8">
						<view class="flex-between-center">
							<view class="f-32 fwb flexAuto m-r-8">{{ row.OrderName }}</view>
							<up-tag text="红冲" type="error"  size="mini" v-if="row.HongChong==='Y'"></up-tag>
							<up-tag text="被红冲" type="error"  size="mini" v-else-if="row.BeiHongChong==='Y'"></up-tag>
						</view>
						<view class="f-24 text-color-text m-t-12">{{ `客户名称 ：${row.ClientName || '--'}` }}</view>
						<view class="f-24 text-color-text m-t-12">{{ `订单编号 ：${row.OrderCode || '--'}` }}</view>
						<view class="f-24 text-color-text m-t-12">{{ `支付方式 ：${row.PayType || '--'}` }}</view>
						<view class="f-24 text-color-text m-t-12">{{ `完工日期 ：${formatDate(row.OrderDate) || '--'}` }}</view>
						<view class="flex bg-color-bg m-t-12 p-16 radius-8">
							<view class="flexAuto text-center flex-c-start-center">
								<view class="countTitle">订单金额</view>
								<view class="countNumber">{{ row.OrderPrice || 0 }}</view>
							</view>
							<view class="line"></view>
							<view class="flexAuto flex-c-start-center">
								<view class="countTitle">核销金额</view>
								<view class="countNumber">{{ row.HxAmt || 0 }}</view>
							</view>
						</view>
						<view class="flex-between-center m-t-12 f-24 text-color-text">
							<text>{{ `销售代表：${row.Sale || ''}` }}</text>
							<text>{{ `核销时间：${row.HxTime || ''}` }}</text>
						</view>
					</view>
				</template>
			</my-list>
		</template>
	</my-main>
</template>

<script lang="uts" setup>
//公共状态
import { useVue  } from '@/utils/useVue.uts'
const { reactive, ref,app,Token,onMounted,watch,http,goToPage,formatDate,getTimeAgo } = useVue()
//
const scanResult=ref('')
// 表单数据
const formData:any = reactive({
})
const options=reactive({
	//收款状态
	PayType:[
		{
		  label: '微信支付',
		  value: '微信支付',
		  type: 'warning',
		},
		{
		  label: '支付宝',
		  value: '支付宝',
		  type: 'primary',
		},
		{
		  label: '卡付',
		  value: '卡付',
		  type: 'warning',
		},
	],//收款状态
	IsHongChong:[
		{
		  label: '正常',
		  value: '',
		  type: 'warning',
		},
		{
		  label: '红冲',
		  value: 1,
		  type: 'warning',
		},
		{
		  label: '被红冲',
		  value: 2,
		  type: 'primary',
		},
		{
		  label: '红冲/被红冲',
		  value: 3,
		  type: 'warning',
		},
	],
})
// 表单数据
const table:any = reactive({
	loading: false,//数据加载
	search:{
		PageLimit: 10,
		PageIndex: 1,
		Count: 0,
		ClientName: "",
		ClientCode: "",
		PayType:"",//收款类型
		IsHongChong:"",//收款类型
		Saler:"",//收款类型
		BeginDate:getTimeAgo(3,'months'),
		EndDate:formatDate(),
	},
	searchSet:{
		searchKey:'ClientName',
		searchLabel:'',
		options:[
			{
				label: '客户名称',
				prop: 'ClientName',
				type:'input',
			},
			{
				label: '销售人员',
				prop: 'Saler',
				type:'input',
			},
			{
				label: '支付方式',
				prop: 'PayType',
				type:'tabs',
				options:options.PayType,
			},
			{
				label: '是否红冲',
				prop: 'IsHongChong',
				type:'tabs',
				options:options.IsHongChong,
			},
			{
				label: '日期范围',
				type:'days',
				start:'BeginDate',
				end:'EndDate',
			},
		]
	},
	tbody:[],
	summary: [
		{
			label: '订单总额',
			prop: 'SumOrderPrice',
		},
		{
			label: '核销总额',
			prop: 'SumHxAmt',
		},
		// {
		// 	label: '未付总额',
		// 	prop: 'SumUnPayAmt',
		// },
		// {
		// 	label: '开票总额',
		// 	prop: 'SumBillingAmt',
		// },
	],
})


//搜索
const getTbody = (scrollSet?:any) => {
	table.loading=true
	http.request({
		url: 'api/report/SalerAmtHisRpt',
		data: table.search,
		isNotToken: true,
		success: (res : any) => {
			table.tbody.push(...res.List)
			table.search.Count = res.Count
			if(table.summary?.length>0){
				table.summary.forEach((el:any)=>{
					el.value=res[el.prop]
				})
			}
			_scrollSet()
		},
		fail:()=>{
			_scrollSet()
		}
	})
	function _scrollSet(){
		table.loading=false
		if(scrollSet){
			scrollSet.triggered=false
		}
	}
}
//初始运行
const infoFun = () => {
	getTbody()
}
onMounted(() => {

})
</script>

<style scoped lang="scss">
.class-name {
	font-weight: bold;
}
</style>
